<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/date-fr-BE.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.4.4.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/json.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/common.css" />
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/invoice.css" />

        <script type="text/javascript">
            function fillClientOrContract(client, contract) {
                var theClient = client;
                if (theClient != null) {
                    $("#client-contract-label").html("Client:")
                } else {
                    $("#client-contract-label").html("Contract:")
                    theClient = contract.client;
                }
                $("#client div.data").html(
                        "<p class=\"client-name\">" + theClient.name + "</p>" +
                        "<p>" + theClient.street + "</p>" +
                        "<p>" + theClient.zip + "  " + theClient.city + "</p>" +
                        "<p>" + theClient.country + "</p>" +
                        "<p>" + theClient.vat + "&nbsp;</p>");
            }

            function fillLines(lines) {
                $("div#lines div").remove();
                var total = 0;
                for (line in lines) {
                    var line_total = lines[line].quantity * lines[line].unitPrice * (1 + lines[line].vat);
                    $("div#lines").append(
                        "<div class=\"line\">" +
                            "<div class=\"description\">" +
                                "<p>" + lines[line].description + "</p>" +
                            "</div>" +
                            "<div class=\"quantity\">" +
                                "<p>" + lines[line].quantity + "</p>" +
                            "</div>" +
                            "<div class=\"price\">" +
                                "<p>" + lines[line].unitPrice + "&nbsp;&euro;</p>" +
                            "</div>" +
                            "<div class=\"vat\">" +
                                "<p>" + lines[line].vat * 100 + "&nbsp;%</p>" +
                            "</div>" +
                            "<div class=\"total\">" +
                                "<p>" + Math.round(line_total * 100) / 100 + "&nbsp;&euro;</p>" +
                            "</div>" +
                        "</div>"
                    );
                    total += line_total;
                }
                $("div#lines-block div.total-line div.total").html("<p>" + Math.round(total * 100) / 100 + "&nbsp;&euro;</p>")
                $("div#lines-block div.line:last div").addClass("pointed-line");
            }

	        $(function () {
                $("select").change(function () {
                    var str = $("select option:selected")[0].value;
                    if (str != "") {
                        $.getJSON("getInvoice", { number: str }, function(invoice) {
                            var issueDate = new Date();
                            issueDate.setTime(invoice.issueDate);
                            $("#date").html("<p>" + issueDate.toString("dd / MM / yyyy") + "</p>");


                            fillClientOrContract(invoice.client, invoice.contract);
                            fillLines(invoice.lines);

                            $("#pdf-download").show();
                            $("#pdf-download").click( function() {
                                var downloadurl = "download.pdf?invoice=" + str;
                               window.open(downloadurl, str);
                            });
                        });
                    }
                });

                <c:if test="${selectedInvoice != null}">
                    $.getJSON("getInvoice", { number: ${selectedInvoice.number} }, function(invoice) {
                        var issueDate = new Date();
                        issueDate.setTime(invoice.issueDate);
                        $("#date").html("<p>" + issueDate.toString("dd / MM / yyyy") + "</p>");

                        fillClientOrContract(invoice.client, invoice.contract);
                        fillLines(invoice.lines);

                        $("#pdf-download").show();
                        $("#pdf-download").click( function() {
                            var downloadurl = "download.pdf?invoice=" + str;
                           window.open(downloadurl, str);
                        });
                    });
                </c:if>

                $("div#lines-block div.line:last div").addClass("pointed-line");

                $("#pdf-download").hide();
            })
        </script>
        <title>Quattroclix - Invoicing</title>
    </head>
    <body>
        <div id="background">
            <div class="wraper">
                <div id="header">
                    <a href="index.html">
                        <img src="../../img/logo.gif" width="257" height="36" id="logo"
                            alt="logo Quattroclix" />
                    </a>
                    <div id="menu">
                        <ul>
                            <li class="first"><a href="../contract/new-contract.html">New Contract</a></li>
                            <li><a href="../invoice/new-invoice.html">New Invoice</a></li>
                            <li><a class="active"  href="../invoice/view-invoice.html">View Invoice</a></li>
                            <li><a href="../timesheet/new-timesheet.html">New Timesheet</a></li>
                            <li><a href="../timesheet/view-timesheet.html">View Timesheet</a></li>
                        </ul>
                    </div>
                </div>
                <div id="invoice">
                    <div id="invoice-header">
                        <div id="invoice-data">
                            <div class="label-value">
                                <div class="label"><p>Facture</p></div>
                                <div class="value">
                                    <select id="invoiceNumberSelect" name="invoice">
                                        <option value="">Select ...</option>
                                        <c:forEach items="${numbers}" var="number">
                                            <c:if test="${number == selectedInvoice.number}">
                                                <option value="${number}" selected="true">${number}</option>
                                            </c:if>
                                            <c:if test="${number != selectedInvoice.number}">
                                                <option value="${number}">${number}</option>
                                            </c:if>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                            <div class="label-value">
                                <div class="label"><p>Date</p></div>
                                <div id="date" class="value"><p>&nbsp;</p></div>
                            </div>
                        </div>
                        <div id="client">
                            <div id="client-contract-label" class="label">Client:</div>
                            <div class="data">
                                <p class="client-name">&nbsp;</p>
                                <p>&nbsp;</p>
                                <p>&nbsp;</p>
                                <p>&nbsp;</p>
                                <p>&nbsp;</p>
                            </div>
                        </div>
                    </div>
                    <div id="lines-block">
                        <div id="lines-header">
                            <div class="description pointed-line">
                                <p>Description</p>
                            </div>
                            <div class="quantity pointed-line">
                                <p>Quantity</p>
                            </div>
                            <div class="price pointed-line">
                                <p>Price</p>
                            </div>
                            <div class="vat pointed-line">
                                <p>VAT</p>
                            </div>
                            <div class="total pointed-line">
                                <p>Total</p>
                            </div>
                        </div>
                        <div id="lines">
                        </div>
                        <div class="total-line">
                            <div class="description">
                                <p>&nbsp;</p>
                            </div>
                            <div class="quantity">
                                <p>&nbsp;</p>
                            </div>
                            <div class="price">
                                <p>&nbsp;</p>
                            </div>
                            <div class="vat">
                                <p>Total:</p>
                            </div>
                            <div class="total">
                                <p> &euro;</p>
                            </div>
                        </div>
                        <div>&nbsp;</div>
                    </div>
                    <div class="imgactions">
                        <div id="pdf-download">&nbsp;</div>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>
